<template>
	<view class="shop-good" :style="{ backgroundColor: bgcolor }">
		<view class="goods-item">
			<!-- 自定义插槽 单选框 -->
			<slot name="radio"></slot>
			<view class="left-img-area">
				<image :src="goodsimg" @click="gotoGoodsDetail(gid, mid)"></image>
			</view>
			<view class="info-area">
				<text class="good-name">{{ goodsname }}</text>
				<!-- 自定义插槽 商品属性选项值选择框 -->
				<slot name="choice"></slot>
				<view class="price-or-num">
					<text>&yen;<text class="price">{{ goodsprice.toFixed(2) }}</text></text>
					<!-- 自定义插槽  步进器 默认name属性值为default 如果有多个插槽注意使用具名插槽 -->
					<slot name="stepper"></slot>
				</view>
				<text class="merchant-name">{{ merchantsname }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否展示该商品的总评论条数
			showComNum: {
				type: Number,
				default: 1
			},
			// 控制组件的背景颜色
			bgcolor: {
				type: String,
				default: '#fff'
			},
			// 商品图片
			goodsimg: {
				type: String,
				default: ''
			},
			// 商品名
			goodsname: {
				type: String,
				default: ''
			},
			// 商品价格
			goodsprice: {
				type: Number,
				required: true
			},
			// 商家名
			merchantsname: {
				type: String,
				default: ''
			},
			// 当前商品是否被选中
			checkState: {
				type: Boolean,
				default: false
			},
			// 当前商品的id
			gid: {
				type: [String, Number]
			},
			// 店家id
			mid: {
				type: [String, Number]
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			gotoGoodsDetail(id, mid) {
				if(!id) return
				uni.navigateTo({
					url: '/subpages/goodsdetail/goodsdetail?id=' + id + '&mid=' + mid
				})
			}
		}
	}
</script>

<style>
	.goods-item {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 240rpx;
		padding: 10rpx 0;
	}
	
	.left-img-area,
	.left-img-area image {
		width: 240rpx;
		height: 100%;
	}
	
	.info-area {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 20rpx;
	}
	
	.good-name {
		overflow: hidden;
		color: #434343;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		word-break: break-all;
		-webkit-box-orient: vertical;
		font-size: 13px;
	}
	
	.price-or-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.price-or-num text {
		font-size: 14px;
	}
	
	text.price {
		color: #e5393c;
		font-size: 16px;
		margin-left: 5rpx;
	}
	
	.merchant-name,
	.comment-num {
		color: #999999;
		font-size: 12px;
	}
	
	.comment-num {
		font-size: 14px;
	}
</style>
